<template>
  <div class="dashboard-container">

    <!-- 左侧区域-->
    <div class="left-content">
      <div class="greeting-box">
        <h2 class="greeting-text">{{ getGreeting() }}</h2>
        <p class="sub-text">这是您的今天业务数据概览</p>
        <!-- 新增日期选择器 -->
        <div class="date-picker-wrap">
          <el-date-picker v-model="selectedDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            placeholder="选择查看日期" style="width: 240px;" @change="changeData" />
        </div>
      </div>
      <div class="data-card">
        <h3 class="card-title">今日核心数据</h3>
        <div class="data-grid">
          <!-- 今日订单(寄样) -->
          <div class="data-item">
            <p class="item-label">今日订单(寄样)</p>
            <p class="item-value">{{ todayData.dateOrderCount }}</p>
            <div class="trend down"> {{ todayData.orderCountDif }}vs 昨日</div>
          </div>

          <!-- 今日寄样产品数 -->
          <div class="data-item">
            <p class="item-label">今日寄样产品数</p>
            <p class="item-value">{{ todayData.dateProductCount }}</p>
            <div class="trend up">{{ todayData.productCountDif }} vs 昨日</div>
          </div>

          <!-- 待处理任务 -->
          <div class="data-item">
            <p class="item-label">待处理任务</p>
            <p class="item-value">{{ todayData.taskNum }}</p>
            <div class="sub-text">{{ todayData.taskDetail }}</div>
          </div>

          <!-- 新增经销商 -->
          <div class="data-item">
            <p class="item-label">新增经销商</p>
            <p class="item-value">{{ todayData.dateCarrierCount }}</p>
            <div class="sub-text">本月累计{{ todayData.carrierNum }}</div>
          </div>
        </div>
      </div>
      <!-- 核心趋势 -->
      <div class="data-card">
        <h3 class="card-title">销售趋势</h3>
        <div ref="chartsRef" class="sales-chart"></div>
      </div>

      <div class="data-card">
        <h3 class="card-title">销售排名(月度)</h3>
        <el-tabs>
          <el-tab-pane label="热销产品">
            <el-table :data="noChangeList.hotSellProduct" style="width: 100%" border>
              <el-table-column label="排名" width="80" align="center">
                <template #default="{ $index }">
                  <span :class="['rank-cell', $index < 3 ? 'top-three' : '']">
                    {{ $index + 1 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="产品编码" align="center" />
              <el-table-column label="图片" align="center">
                <template #default="{ row }">
                  <el-image v-if="row.productUtl" :src="row.productUtl" style="width: 50px; height: 50px" fit="cover"
                    :preview-src-list="[row.productUtl]">
                  </el-image>
                  <span v-else>无图片</span>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="产品名称" align="center" />
              <el-table-column prop="childName" label="系列" align="center" />
              <el-table-column prop="material" label="材质" align="center" />
              <el-table-column prop="sendNum" label="寄样数量" align="center">
                <template #default="{ row }">
                  {{ row.sendNum || 0 }}
                </template>
              </el-table-column>
              <el-table-column prop="collectNum" label="收藏数量" align="center">
                <template #default="{ row }">
                  {{ row.collectNum || 0 }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="收藏产品">
            <el-table :data="noChangeList.collectProductList" style="width: 100%" border>
              <el-table-column label="排名" width="80" align="center">
                <template #default="{ $index }">
                  <span :class="['rank-cell', $index < 3 ? 'top-three' : '']">
                    {{ $index + 1 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="产品编码" align="center" />
              <el-table-column label="图片" align="center">
                <template #default="{ row }">
                  <el-image v-if="row.productUtl" :src="row.productUtl" style="width: 50px; height: 50px" fit="cover"
                    :preview-src-list="[row.productUtl]">
                  </el-image>
                  <span v-else>无图片</span>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="产品名称" align="center" />
              <el-table-column prop="childName" label="系列" align="center" />
              <el-table-column prop="material" label="材质" align="center" />
              <el-table-column prop="sendNum" label="寄样数量" align="center">
                <template #default="{ row }">
                  {{ row.sendNum || 0 }}
                </template>
              </el-table-column>
              <el-table-column prop="collectNum" label="收藏数量" align="center">
                <template #default="{ row }">
                  {{ row.collectNum || 0 }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="产品系列">
            <el-table :data="noChangeList.productSeriesList" style="width: 100%" border>
              <el-table-column label="排名" width="80" align="center">
                <template #default="{ $index }">
                  <span :class="['rank-cell', $index < 3 ? 'top-three' : '']">
                    {{ $index + 1 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="childName" label="系列" align="center" />
              <el-table-column prop="sendNum" label="寄样数量" align="center">
                <template #default="{ row }">
                  {{ row.sendNum || 0 }}
                </template>
              </el-table-column>
              <el-table-column prop="proNum" label="成品下单数量" align="center">
                <template #default="{ row }">
                  {{ row.proNum || 0 }}
                </template>
              </el-table-column>
              <el-table-column prop="collectNum" label="收藏数量" align="center">
                <template #default="{ row }">
                  {{ row.collectNum || 0 }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="data-card">
        <h3 class="card-title">经销商排名(月度)</h3>
        <el-table :data="noChangeList.distributor" style="width: 100%" border>
          <el-table-column label="排名" width="80" align="center">
            <template #default="{ $index }">
              <span :class="['rank-cell', $index < 3 ? 'top-three' : '']">
                {{ $index + 1 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="供应商名称" align="center" />
          <el-table-column prop="orderNum" label="寄样单数量" align="center">
            <template #default="{ row }">
              {{ row.orderNum || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="proNum" label="成品下单数量" align="center">
            <template #default="{ row }">
              {{ row.proNum || 0 }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="data-card">
        <h3 class="card-title">供应商排名(月度)</h3>
        <el-table :data="noChangeList.supplierList" style="width: 100%" border>
          <el-table-column label="排名" width="80" align="center">
            <template #default="{ $index }">
              <span :class="['rank-cell', $index < 3 ? 'top-three' : '']">
                {{ $index + 1 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="供应商名称" align="center" />
          <el-table-column prop="deliveryNum" label="交货量" align="center">
            <template #default="{ row }">
              {{ row.deliveryNum || 0 }}
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <!-- 右侧区域-->
    <div class="right-section">
      <!-- 左侧内容区 -->
      <div class="left-section">
        <!-- 提醒模块 -->
        <div class="card reminder-card">
          <div class="card-header">
            <el-icon :size="20" color="#fa541c">
              <BellFilled />
            </el-icon>
            <h3>提醒事项</h3>
          </div>
          <div class="card-content">
            <div class="card-content">
              <div class="reminder-item">
                <div class="reminder-info">
                  <div class="reminder-title">寄样超时</div>
                  <div class="reminder-desc">{{ todayData.sendTimeoutNumber }}个订单寄样超时</div>
                </div>
                <div class="reminder-badge urgent">{{ todayData.sendTimeoutNumber }}项</div>
              </div>

              <div class="reminder-item">
                <div class="reminder-info">
                  <div class="reminder-title">供应商证书到期</div>
                  <div class="reminder-desc">{{ todayData.certExpireRemindNumber }}家即将过期</div>
                </div>
                <div class="reminder-badge urgent">{{ todayData.certExpireRemindNumber }}项</div>
              </div>

            </div>
          </div>

          <!-- 待办事项模块 -->
          <div class="card todo-card">
            <div class="card-header">
              <el-icon :size="20" color="#722ed1">
                <List />
              </el-icon>
              <h3>待办事项</h3>
            </div>
            <div class="card-content">
              <div class="progress-item">
                <div class="progress-info">
                  <div class="progress-title">寄样申请审批</div>
                  <div class="progress-value">{{ todayData.approveSize }} 项</div>
                </div>
                <!-- <el-progress :percentage="70" color="#1890ff" :show-text="false" /> -->
              </div>

              <div class="progress-item">
                <div class="progress-info">
                  <div class="progress-title">寄样待发货</div>
                  <div class="progress-value">{{ todayData.readySend }}项</div>
                </div>
                <!-- <el-progress :percentage="30" color="#52c41a" :show-text="false" /> -->
              </div>

            </div>
          </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="right-section">
          <!-- 快捷操作模块 -->
          <div class="card quick-actions-card">
            <div class="card-header">
              <el-icon :size="20" color="#13c2c2">
                <MagicStick />
              </el-icon>
              <h3>快捷操作</h3>
            </div>
            <div class="card-content">
              <div class="actions-grid">
                <div class="action-item" @click="toPage(0)">
                  <div class="action-icon">
                    <el-icon :size="28" color="#1890ff">
                      <Goods />
                    </el-icon>
                  </div>
                  <div class="action-label">新增产品</div>
                </div>

                <div class="action-item" @click="toPage(1)">
                  <div class="action-icon">
                    <el-icon :size="28" color="#52c41a">
                      <Shop />
                    </el-icon>
                  </div>
                  <div class="action-label">新增经销商</div>
                </div>

                <div class="action-item" @click="toPage(2)">
                  <div class="action-icon">
                    <el-icon :size="28" color="#722ed1">
                      <OfficeBuilding />
                    </el-icon>
                  </div>
                  <div class="action-label">新增供应商</div>
                </div>

                <div class="action-item" @click="toPage(3)">
                  <div class="action-icon">
                    <el-icon :size="28" color="#fa8c16">
                      <Document />
                    </el-icon>
                  </div>
                  <div class="action-label">寄样审批</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据概览模块 -->
          <!-- <div class="card stats-card">
            <div class="card-header">
              <el-icon :size="20" color="#1890ff">
                <DataAnalysis />
              </el-icon>
              <h3>数据概览</h3>
            </div>
            <div class="card-content">
              <div class="stats-grid">
                <div class="stat-card">
                  <div class="stat-header">
                    <div class="stat-title">产品总数</div>
                    <el-icon :size="18" color="#36b3a8">
                      <Goods />
                    </el-icon>
                  </div>
                  <div class="stat-value">1,248</div>
                  <div class="stat-trend">
                    <el-icon :size="14" color="#38cb89">
                      <Top />
                    </el-icon>
                    <span>12.5%</span>
                  </div>
                </div>

                <div class="stat-card">
                  <div class="stat-header">
                    <div class="stat-title">缺货产品</div>
                    <el-icon :size="18" color="#e9573f">
                      <SoldOut />
                    </el-icon>
                  </div>
                  <div class="stat-value">86</div>
                  <div class="stat-trend down">
                    <el-icon :size="14" color="#e9573f">
                      <Bottom />
                    </el-icon>
                    <span>3.2%</span>
                  </div>
                </div>

                <div class="stat-card">
                  <div class="stat-header">
                    <div class="stat-title">新品上架</div>
                    <el-icon :size="18" color="#f6c659">
                      <Star />
                    </el-icon>
                  </div>
                  <div class="stat-value">45</div>
                  <div class="stat-trend">
                    <el-icon :size="14" color="#38cb89">
                      <Top />
                    </el-icon>
                    <span>8.7%</span>
                  </div>
                </div>

                <div class="stat-card">
                  <div class="stat-header">
                    <div class="stat-title">供应商总数</div>
                    <el-icon :size="18" color="#1a73e8">
                      <OfficeBuilding />
                    </el-icon>
                  </div>
                  <div class="stat-value">68</div>
                  <div class="stat-trend">
                    <el-icon :size="14" color="#38cb89">
                      <Top />
                    </el-icon>
                    <span>5.2%</span>
                  </div>
                </div>
              </div>
            </div>
          </div> -->

        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import {
  ShoppingCart,
  Check,
  Clock,
  BellFilled,
  List,
  MagicStick,
  Goods,
  Shop,
  OfficeBuilding,
  Document,
  DataAnalysis,
  Top,
  Bottom,
  Star,
  SoldOut
} from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { useEcharts } from "@/hooks/useEcharts";
import { supplierRank, carrierRank, productSeries, collectProduct, hotSellProduct, salesTrend, todoSchedule, sendTimeout, certExpireRemind, topOrder } from "@/api/home.js";
const router = useRouter();
const selectedDate = ref(dayjs().format('YYYY-MM-DD'));
function getGreeting() {
  const hour = new Date().getHours();
  if (hour >= 5 && hour < 11) {
    return '早上好 🌞';
  } else if (hour >= 11 && hour < 13) {
    return '中午好 ☀️';
  } else if (hour >= 13 && hour < 18) {
    return '下午好 🌤';
  } else if (hour >= 18 && hour < 24) {
    return '晚上好 🌙';
  } else {
    return '夜深了 🌚';
  }
}
const toPage = (type) => {
  let typeList = [
    '/productMagment/productLibrary',
    '/operationMagment/operation',
    '/supplier',
    '/operationMagment/order'
  ]
  if (type != 3) {
    router.push({
      path: typeList[type],
      query: { 'add': 0 }
    })
  } else {
    router.push({
      path: typeList[type],
      query:{"index":0}
    })
  }

}

// 新增图表相关ref和数据
const chartsRef = ref(null);

// 模拟最近12个月数据
const mockData = {
  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  sampleOrders: [120, 132, 101, 134, 90, 230, 210, 230, 180, 130, 120, 200],  // 寄样订单
  completedSamples: [90, 110, 80, 105, 60, 180, 150, 170, 140, 90, 80, 150]    // 完成寄样
};

// 初始化图表函数
const initChart = async () => {
  let { data } = await salesTrend();
  const myChart = echarts.init(chartsRef.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'line' }
    },
    grid: { top: '8%', left: '5%', right: '5%', bottom: '8%' },
    xAxis: {
      type: 'category',
      data: data.map(item => item.monthStr),
      axisLine: { color: '#e6ebf5' },
      axisTick: { show: false },
      axisLabel: { color: '#606266' }
    },
    yAxis: {
      type: 'value',
      axisLine: { color: '#e6ebf5' },
      axisTick: { show: false },
      axisLabel: { color: '#606266' },
      splitLine: { lineStyle: { color: '#f0f2f5' } }
    },
    series: [
      {
        name: '寄样产品数',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        data: data.map(item => item.saleNum),
        lineStyle: { color: '#1890ff', width: 2 },
        itemStyle: { color: '#fff', borderColor: '#1890ff', borderWidth: 2 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(24, 144, 255, 0.1)' },
            { offset: 1, color: 'rgba(24, 144, 255, 0)' }
          ])
        }
      }
    ]
  };

  useEcharts(myChart, option);  // 使用自定义hooks管理图表生命周期
};

const noChangeList = reactive({
  supplierList: [],//供应商月度排名
  distributor: [],//经销商排名
  productSeriesList: [],//产品系列
  collectProductList: [],//收藏产品
  hotSellProduct: [],//热销产品
})

const todayData = reactive({
  approveSize: 0,
  readySend: 0,
  sendTimeoutNumber: 0,
  certExpireRemindNumber: 0,
  dateOrderCount: 0, //今日订单
  orderCountDif: 0,//今日订单较昨日变化
  dateProductCount: 0,//今日产品数
  productCountDif: 0,//今日产品数较昨日变化
  taskNum: 0,//待办事项
  taskDetail: "",//待办事项详情
  dateCarrierCount: 0,//今日经销商数
  carrierNum: 0,//总的经销商数
})
const changeData = async () => {
  let { data } = await todoSchedule();
  todayData.readySend = data.readySend;
  todayData.approveSize = data.approveSize;
  const { data: data2 } = await sendTimeout();
  todayData.sendTimeoutNumber = data2
  const { data: data3 } = await certExpireRemind();
  todayData.certExpireRemindNumber = data3
  const { data: data4 } = await topOrder({ date: selectedDate.value });
  todayData.dateOrderCount = data4.dateOrderCount;
  todayData.orderCountDif = data4.orderCountDif;
  todayData.dateProductCount = data4.dateProductCount;
  todayData.productCountDif = data4.productCountDif;
  todayData.taskNum = data4.taskNum;
  todayData.taskDetail = data4.taskDetail;
  todayData.dateCarrierCount = data4.dateCarrierCount;
  todayData.carrierNum = data4.carrierNum;
}

const noChangeData = async () => {
  let { data } = await supplierRank();
  noChangeList.supplierList = data;
  let { data: data2 } = await carrierRank();
  noChangeList.distributor = data2;
  let { data: data3 } = await productSeries();
  noChangeList.productSeriesList = data3;
  let { data: data4 } = await collectProduct();
  noChangeList.collectProductList = data4;
  let { data: data5 } = await hotSellProduct();
  noChangeList.hotSellProduct = data5;
}

// 挂载时初始化图表
onMounted(() => {
  initChart();
  noChangeData();
  changeData();
});
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 24px;
  background-color: #f8f9fa;
  /* 调整为更柔和的浅灰色背景 */
  min-height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  display: flex;
  gap: 24px;
  /* 新增：左右区域间距 */

  .left-content {
    flex: 7;

    .greeting-box {
      margin-bottom: 24px;

      // 新增日期选择器样式
      .date-picker-wrap {
        margin-top: 16px;
        /* 与上方文字保持间距 */

        :deep(.el-date-picker) {
          border-radius: 8px;
          /* 圆角与卡片统一 */
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          /* 微阴影 */

          :deep(.el-input__wrapper) {
            padding: 8px 12px;
            /* 调整输入框内边距 */
            background: #fff;
            /* 白色背景 */
          }
        }
      }

      .greeting-text {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
      }

      .sub-text {
        font-size: 16px;
        color: #606266;
      }
    }

    .data-card {
      background: #fff;
      border-radius: 8px;
      margin: 10px 0;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .sales-chart {
        height: 320px; // 设置图表高度
        margin-top: 8px;
      }

      .card-title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 16px;
      }

      .data-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;

        .data-item {
          padding: 16px;
          background: #f8f9fa;
          border-radius: 6px;

          .item-label {
            font-size: 14px;
            color: #606266;
            margin-bottom: 4px;
          }

          .item-value {
            font-size: 20px;
            font-weight: 600;
            color: #303133;
          }
        }
      }
    }
  }
}



.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
  }

  .card-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f2f5;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #1f2d3d;
      margin-left: 10px;
    }
  }

  .card-content {
    padding: 24px;
  }
}




.reminder-card {
  .reminder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px;
    border-bottom: 1px solid #f0f2f5;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .reminder-info {
      .reminder-title {
        font-size: 15px;
        font-weight: 500;
        color: #1f2d3d;
        margin-bottom: 4px;
      }

      .reminder-desc {
        min-width: 120px;
        font-size: 13px;
        color: #606266;
      }
    }

    .reminder-badge {
      min-width: 50px;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;

      &.urgent {
        background: rgba(250, 84, 28, 0.1);
        color: #fa541c;
      }

      &.warning {
        background: rgba(250, 173, 20, 0.1);
        color: #faad14;
      }
    }
  }
}

.todo-card {
  .progress-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .progress-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .progress-title {
        font-size: 14px;
        color: #606266;
      }

      .progress-value {
        font-size: 14px;
        font-weight: 500;
        color: #1f2d3d;
      }
    }

    :deep(.el-progress-bar) {
      padding-right: 0;
    }
  }
}

.quick-actions-card {
  .actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      border-radius: 8px;
      background: #f8fafc;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        background: #e6f7ff;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(24, 144, 255, 0.1);
      }

      .action-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        // background: rgba(24, 144, 255, 144, 255, 0.1);
        display: flex;
        align-items: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
      }

      .action-label {
        font-size: 14px;
        font-weight: 500;
        color: #1f2d3d;
      }
    }
  }
}

.stats-card {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .stat-card {
      background: #f8fafc;
      border-radius: 10px;
      padding: 16px;
      border-left: 4px solid #36b3a8;

      &:nth-child(2) {
        border-left-color: #e9573f;
      }

      &:nth-child(3) {
        border-left-color: #f6c659;
      }

      &:nth-child(4) {
        border-left-color: #1a73e8;
      }

      .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .stat-title {
          font-size: 14px;
          color: #606266;
        }
      }

      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #1f2d3d;
        margin-bottom: 8px;
      }

      .stat-trend {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #38cb89;

        &.down {
          color: #e9573f;
        }
      }
    }
  }
}



@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }

  .right-section {
    width: 100% !important;
  }

  .welcome-card {
    flex-direction: column;
    align-items: flex-start;

    .quick-stats {
      width: 100%;
      margin-top: 24px;
      flex-wrap: wrap;
    }
  }
}

@media (max-width: 768px) {
  .quick-stats {
    flex-direction: column;
  }

  .actions-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}
</style>